<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工档案编辑</title>
</head>
<body>
<form class="fit" id="page_emp_editor_form">
    <div class="easyui-layout" data-options="fit:true">
        <!--        <div data-options="region:'north',height:'auto'" class="form-item-style">-->
        <!--            <div style="text-align: center;width: 100%;height: 100%;margin: 0;border: 0;">-->
        <!--                <b>人事档案编辑</b>-->
        <!--            </div>-->
        <!--        </div>-->
        <div data-options="region:'center'" class="form-item-style">
            <div>
                <input name="id" type="hidden">
                <input class="easyui-textbox" name="empSerialNo"
                       data-options="labelAlign:'right',
                       readonly:true,
                       label:'文档系统编号：',
                       labelWidth:100,
                       width:235">
                <input class="easyui-combobox" name="empState"
                       id="emp_empState"
                       data-options="
                       labelAlign:'right',
                       label:'状态：',
                       data:[{text:'在职'},{text:'离职'},{text:'退休'}],
                       textField:'text',
                       valueField:'text',
                       panelHeight:'auto',
                       editable:false,
                       value:'在职',
                       limitToList:true,
                       labelWidth:100,
                       width:235">
            </div>
            <div>
                <input class="easyui-textbox" name="empName"
                       data-options="labelAlign:'right',label:'员工姓名：',labelWidth:100,width:235,required:true">
                <input class="easyui-textbox" name="empNumber"
                       data-options="labelAlign:'right',label:'工号：',labelWidth:100,width:235,required:false">
                <input class="easyui-combotree" name="departmentId"
                       data-options="
                       url:'department/tree',
                       method:'GET',
                       editable:false,
                       required:true,
                       queryParams:{parentId:1},
                       labelAlign:'right',
                       textField:'text',
                       valueField:'id',
                       label:'部门：',
                       labelWidth:100,
                       width:235,">
            </div>
            <div>
                <input class="easyui-combobox" name="empSex"
                       data-options="labelAlign:'right',
                       label:'性别：',
                       labelWidth:100,
                       width:235,
                       data:[{id:0,text:'女'},{id:1,text:'男'}],
                       textField:'text',
                       valueField:'id',
                       panelHeight:'auto',
                       value:1,
                       editable:false
                        ">
                <input class="easyui-combobox" name="duty"
                       data-options="
                       labelAlign:'right',
                       required:false,
                       label:'职务：',
                       url:'duty/listQuery',
                       textField:'dutyName',
                       valueField:'dutyName',
                       method:'GET',
                       labelWidth:100,
                       width:235">
                <input class="easyui-textbox" name="identityCard"
                       data-options="labelAlign:'right',label:'身份证号：',labelWidth:100,width:235">
            </div>
            <div>
                <input class="easyui-textbox" name="birthPlace"
                       data-options="labelAlign:'right',label:'籍贯：',labelWidth:100,width:235">
                <input class="easyui-combobox" name="marryState"
                       data-options="
                       labelAlign:'right',
                       data:[{id:0,text:'未婚'},{id:1,text:'已婚'}],
                       textField:'text',
                       valueField:'id',
                       value:1,
                       editable:false,
                       panelHeight:'auto',
                       label:'婚姻状态：',
                       labelWidth:100,
                       width:235">
                <input class="easyui-combobox" name="nation"
                       data-options="
                       labelAlign:'right',
                       url:'nation/listQuery',
                       method:'GET',
                       textField:'nationName',
                       valueField:'nationName',
                       label:'民族：',
                       labelWidth:100,
                       width:235">
            </div>
            <div>
                <input class="easyui-datebox" name="entryDate"
                       data-options="labelAlign:'right',label:'入职时间：',
                       labelWidth:100,width:235">
                <input class="easyui-datebox" name="leaveDate"
                       data-options="labelAlign:'right',
                       label:'离职时间：',
                       labelWidth:100,
                       width:235">
                <input class="easyui-textbox" name="telephoneNo01"
                       data-options="labelAlign:'right',label:'电话1：',labelWidth:100,width:235">
            </div>
            <div>
                <input class="easyui-textbox" name="endowmentInsurance"
                       data-options="labelAlign:'right',label:'养老保险号码：',labelWidth:100,width:235">
                <input class="easyui-textbox" name="housingProvidentFund"
                       data-options="labelAlign:'right',label:'公积金号码：',labelWidth:100,width:235">
                <input class="easyui-textbox" name="telephoneNo02"
                       data-options="labelAlign:'right',label:'电话2：',labelWidth:100,width:235">
            </div>
            <div>
                <input class="easyui-textbox" name="identityCardAddress"
                       data-options="labelAlign:'right',label:'身份证地址：',labelWidth:100,width:712">
            </div>
            <div>
                <input class="easyui-textbox" name="currentAddress"
                       data-options="labelAlign:'right',label:'现住址：',labelWidth:100,width:712">
            </div>
            <div>
                <input class="easyui-textbox" name="personName"
                       data-options="labelAlign:'right',label:'紧急联系人1：',labelWidth:100,width:235">
                <input class="easyui-textbox" name="relation"
                       data-options="labelAlign:'right',label:'关系：',labelWidth:100,width:235">
                <input class="easyui-textbox" name="telephoneNumber"
                       data-options="labelAlign:'right',label:'电话：',labelWidth:100,width:235">
            </div>
            <!--            <div>-->
            <!--                <input class="easyui-textbox" name="other01"-->
            <!--                       data-options="labelAlign:'right',label:'紧急联系人2：',labelWidth:100,width:235">-->
            <!--                <input class="easyui-textbox" name="other02"-->
            <!--                       data-options="labelAlign:'right',label:'关系：',labelWidth:100,width:235">-->
            <!--                <input class="easyui-textbox" name="other03"-->
            <!--                       data-options="labelAlign:'right',label:'电话：',labelWidth:100,width:235">-->
            <!--            </div>-->
            <div>
                <input class="easyui-textbox" name="other01"
                       data-options="labelAlign:'right',label:'其他1：',labelWidth:100,width:235">
                <input class="easyui-textbox" name="other02"
                       data-options="labelAlign:'right',label:'其他2：',labelWidth:100,width:235">
                <input class="easyui-textbox" name="other03"
                       data-options="labelAlign:'right',label:'其他3：',labelWidth:100,width:235">
            </div>
        </div>
        <div data-options="region:'south',height:310">
            <div class="tool-bar-style">
                <a class="easyui-linkbutton" data-options="plain:true"><b>附件</b></a>
                <input class="easyui-filebox" id="page_emp_editor_filebox">
                <a class="easyui-linkbutton"
                   data-options="iconCls:'icon-cancel',onClick:btn_page_emp_remove_file">删除</a>
            </div>
            <div style="height:calc(100% - 80px);width: 100%;margin: 0;border: 0;padding: 0;">
                <table id="page_emp_editor_file_grid" class="easyui-edatagrid" data-options="
             fit:true,
             rownumbers:true,
             striped: true,
             fitColumns:false,
             columns:[[
             {title:'主键',field:'id',hidden:true,width:80,align:'center',halign:'center'},
             {title:'外键',field:'employeeId',hidden:true,width:80,align:'center',halign:'center'},
             {title:'名称',field:'fileName',width:160,hidden:true,align:'left',halign:'center'},
             {title:'名称',field:'fileAlias',width:160,align:'center',halign:'left',editor:{type:'textbox',options:{required:true}}},
             {title:'上传日期',field:'uploadTime',width:80,align:'left',halign:'center'},
             {title: '操作员', field: 'createUserId', width: 55, align: 'center', halign: 'center', formatter: user_formatter},
             {title:'类型',field:'fileType',width:60,align:'center',halign:'center'},
             {title:'备注',field:'remarks',width:315,align:'left',halign:'center',editor:{type:'textbox',options:{}}},
             {title:'附件',field:'icon',width:80,align:'center',halign:'center',formatter:emp_grid_formatter},
             ]],
             onLoadSuccess:emp_grid_onLoadSuccess,
            "></table>
            </div>
            <div style="height: 40px;padding: 5px;">
                <div class="pull-right">
                    <a class="easyui-linkbutton"
                       data-options="iconCls:'icon-no',onClick:btn_page_emp_editor_cancel">取消</a>
                    <a class="easyui-linkbutton"
                       data-options="iconCls:'icon-save',onClick:btn_page_emp_editor_save_and_exit">保存后退出</a>
                    <a class="easyui-linkbutton"
                       data-options="iconCls:'icon-save',onClick:btn_page_emp_editor_save_and_add">保存后新增</a>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    function emp_grid_formatter(v, r, i) {
        return `<a class="easyui-linkbutton" idField="${r['id']}" item="page_emp" id="${i}">预览</a>
                <a download="${r.fileName}" class="easyui-linkbutton" idField="${r['id']}" item="page_emp_download">下载</a>`
    }

    function emp_grid_onLoadSuccess() {
        $("a[item='page_emp']").linkbutton({
            iconCls: 'icon-clip',
            onClick: function () {
                let idField = $(this).attr('idField');
                if (idField != undefined) {
                    loadViewPage('empExtraFile/view/' + idField);
                }
            }
        })
        $("a[item='page_emp_download']").linkbutton({
            iconCls: 'icon-save',
            onClick: function () {
                let idField = $(this).attr('idField');
                if (idField != undefined) {
                    window.open('empExtraFile/download/' + idField,'_blank')
                }
            }
        })
    }

    //  文件
    var page_emp_editor_files = [];

    //  取消
    function btn_page_emp_editor_cancel() {
        $.messager.confirm('提示', '确定退出?编辑状态不保存!', function (r) {
            if (r) {
                $('#page_emp_editable_dialog').dialog('close');
            }
        })
    }

    //  保存并退出
    function btn_page_emp_editor_save_and_exit() {
        let title = $('#page_emp_editable_dialog').panel("header")[0].innerText;
        console.log(title);
        if (!$('#page_emp_editor_form').form('validate')) {
            $.messager.alert('提示', '请输入完整!', 'warning')
            return;
        }
        $('#page_emp_editor_file_grid').edatagrid('saveRow');
        // if (page_emp_editor_files.length > 0) {
        let formData = new FormData($('#page_emp_editor_form')[0]);
        let selected = $('#page_emp_department_tree').tree('getSelected');
        if (selected == undefined) {
            $.messager.alert('警告', '未选中文档类别!', 'error');
            return;
        }
        formData.append('docDeptId', selected.id);
        for (let i of page_emp_editor_files) {
            formData.append('files', i, i.name);
        }
        $.ajax({
            url: (function () {
                return title == '修改编辑' ? 'employee/upload/update' : 'employee/upload/batch'
            })(),
            type: 'POST',
            beforeSend: function (xhr) {
                // $.messager.progress({title: '请等待。。。', interval: 5000});
            },
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.success) {
                    $.messager.show({title: '提示', msg: data.message});
                    let rows = $('#page_emp_editor_file_grid').datagrid('getRows');
                    if (rows.length > 0) {
                        let id = data.data.id;
                        for (let i of rows) {
                            i.employeeId = id;
                        }
                        return $.ajax({
                            url: (function () {
                                return title == '修改编辑' ? 'empExtraFile/multiUpdate' : 'empExtraFile/multiInsert'
                            })(),
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify(rows),
                            dataType: 'json',
                        })
                    }
                } else {
                    $.messager.show({title: '提示', msg: data.message});
                    $.messager.progress('close');
                }
            },
            error: function () {
                $.messager.progress('close');
                // $.messager.show({title: '错误', msg: "无法连接服务器"});
            }
        }).then(function (data) {
            if (data.success) {
                $('#page_emp_editable_dialog').dialog('close');
                page_emp_editor_files.splice(0, page_emp_editor_files.length);
                // $('#page_emp_editor_file_grid').datagrid('loadData', data.data);
                reloadEmpGrid();
            }
            $.messager.show({title: data.state, msg: data.message})
            $.messager.progress('close');
        }, function () {
            $.messager.progress('close');
            $.messager.alert('提示', '发生错误,上传失败!', 'warning')
        })
        // }
    }

    //  保存并新增
    function btn_page_emp_editor_save_and_add() {
        let title = $('#page_emp_editable_dialog').panel("header")[0].innerText;

        if (!$('#page_emp_editor_form').form('validate')) {
            $.messager.alert('提示', '请输入完整!', 'warning')
            return;
        }
        $('#page_emp_editor_file_grid').edatagrid('saveRow');
        // if (page_emp_editor_files.length > 0) {
        let formData = new FormData($('#page_emp_editor_form')[0]);
        let selected = $('#page_emp_department_tree').tree('getSelected');
        if (selected == undefined) {
            $.messager.alert('警告', '未选中文档类别!', 'error');
            return;
        }
        formData.append('docDeptId', selected.id);
        for (let i of page_emp_editor_files) {
            formData.append('files', i, i.name);
        }
        // $.messager.progress({});
        $.ajax({
            url: (function () {
                return title == '修改编辑' ? 'employee/upload/update' : 'employee/upload/batch'
            })(),
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.success) {
                    $.messager.show({title: '提示', msg: data.message});
                    let rows = $('#page_emp_editor_file_grid').datagrid('getRows');
                    if (rows.length > 0) {
                        let id = data.data.id;
                        for (let i of rows) {
                            i.employeeId = id;
                        }
                        return $.ajax({
                            url: (function () {
                                return title == '修改编辑' ? 'empExtraFile/multiUpdate' : 'empExtraFile/multiInsert'
                            })(),
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify(rows),
                            dataType: 'json',
                        })
                    }
                } else {
                    $.messager.show({title: '提示', msg: data.message});
                    $.messager.progress('close');
                }
            },
            error: function () {
                $.messager.progress('close');
            }
        }).then(function (data) {
            if (data.success) {
                $('#page_emp_editor_file_grid').datagrid('loadData', {total: 0, rows: []});
                $('#page_emp_editor_form').form('clear');
                page_emp_editor_files.splice(0, page_emp_editor_files.length);
                reloadEmpGrid();
                $('#page_emp_editable_dialog').dialog('close');
                btn_page_emp_add();
            }
            $.messager.show({title: data.state, msg: data.message})
            $.messager.progress('close');
        }, function () {
            $.messager.progress('close');
            $.messager.alert('提示', '发生错误,上传失败!', 'warning')
        })
        // }
    }

    //  删除文件
    function btn_page_emp_remove_file() {
        let selected = $('#page_emp_editor_file_grid').datagrid('getSelected');
        $('#page_emp_editor_file_grid').datagrid('deleteRow', $('#page_emp_editor_file_grid').datagrid('getRowIndex', selected));
        for (let i = 0; i < page_emp_editor_files.length; i++) {
            if (page_emp_editor_files[i].name == selected.fileName) {
                page_emp_editor_files.splice(i, 1);
                return;
            }
        }
    }

    $(function () {
        $('#page_emp_editor_filebox').filebox({
            buttonText: '新增附件',
            buttonAlign: 'left',
            multiple: true,
            onChange: function (newVal, oldVal) {
                let files = $(this).filebox('files');
                if (files && files.length > 0)
                    for (let item of files) {
                        let row = {
                            fileName: item.name,
                            fileAlias: item.name,
                            fileType: item.type,
                            remarks: null
                        }
                        $('#page_emp_editor_file_grid').datagrid('appendRow', row);
                        page_emp_editor_files.push(item);
                        emp_grid_onLoadSuccess();
                    }
            }
        })
    })

    function reloadEmpGrid() {
        let kGrid = $('#page_emp_grid_main').data('kendoGrid');
        if (kGrid != undefined)
            kGrid.dataSource.read({
                departmentId: (function () {
                    let selected = $('#page_emp_department_tree').tree('getSelected');
                    if (selected) {
                        if (selected.id == 1) return null;
                        return selected.id;
                    } else {
                        return null;
                    }
                })()
            });
    }
</script>
</body>
</html>